<template>
  <div class="warp">
    <el-dialog
      destroy-on-close
      v-model="dialogFormVisible"
      :title="statusObj.status == 'edit' ? '编辑' : '新增用户'"
    >
      <el-form :model="form" ref="formRef" :rules="rules">
        <el-form-item required label="用户名称" prop="niceName">
          <el-input v-model="form.niceName" placeholder="用户名称"></el-input>
        </el-form-item>
        <el-form-item required label="登录账号" prop="userName">
          <el-input v-model="form.userName" placeholder="登录账号"></el-input>
        </el-form-item>
        <el-form-item required label="登录密码" prop="userPas">
          <el-input v-model="form.userPas" placeholder="登录密码"></el-input>
        </el-form-item>
        <el-form-item required label="账号角色" prop="role">
          <el-select v-model="form.role" placeholder="账号角色">
            <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item required label="账号状态" prop="status">
          <el-switch v-model="form.status" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible">取消</el-button>
          <el-button type="primary" :loading="Btnloading" @click="dialogForm">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, ref } from "vue";
import axios from "@/utils/axios";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
export default {
  name: "Index",
  props: ["detail", "dialogFormVisible"],
  setup(props, context) {
    const formRef = ref(null);
    const store = useStore();
    const state = reactive({
      statusObj: {}, //表单状态标识
      fathForm: {}, //新增子级时使用
      Btnloading: false, //表单提交时长
      roleOptions: [
        {
          lable: "1",
          value: "管理员",
        },
        {
          lable: "2",
          value: "体验成员",
        },
      ],
      form: {
        niceName: "",
        userName: "",
        userPas: "",
        role: "",
        status: true,
      },
      rules: {
        niceName: [
          {
            required: "true",
            message: "用户名称不能为空",
            trigger: ["change", "blur"],
          },
        ],
        userName: [
          {
            required: "true",
            message: "登录账号不能为空",
            trigger: ["change", "blur"],
          },
        ],
        userPas: [
          {
            required: "true",
            message: "登录密码不能为空",
            trigger: ["change", "blur"],
          },
        ],
        role: [
          {
            required: "true",
            message: "账号角色不能为空",
            trigger: ["change", "blur"],
          },
        ],
        status: [
          {
            required: "true",
            message: "账号状态不能为空",
            trigger: ["change", "blur"],
          },
        ],
      },
    });

    onMounted(async () => {
      if (props.dialogFormVisible) {
        state.statusObj = props.detail.obj;
        state.fathForm = props.detail;
        if (state.statusObj.status == "edit") {
          delete props.detail.obj;
          state.form = props.detail;
        }
      }
    });

    //图标选择回调
    const handleSelect = (item) => {
      state.form.ico = item;
    };
    //关闭弹窗
    const dialogVisible = () => {
      context.emit("dialogVisible", false);
    };
    //表单提交
    const dialogForm = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          state.Btnloading = true;
          setTimeout(() => {
            state.Btnloading = false;
            store.dispatch("asyncSetMemuList"); //重新获取左侧菜单列表
            ElMessage({
              type: "success",
              message: "提交成功",
            });
            dialogVisible();
          }, 500);
        } else {
          return false;
        }
      });
    };

    return {
      ...toRefs(state),
      handleSelect, //图标选择回调
      dialogVisible, //关闭弹窗
      formRef, //表单
      dialogForm, //表单提交验证
    };
  },
};
</script>

<style lang="scss" scoped>
.warp {
  :deep() {
    .el-icon svg {
      font-size: 20px;
    }
    .el-input-group__prepend {
      width: 60px;
    }
  }
}
</style>